<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
    #container {
        background: #f1f1f1;
        width: 400px;
        min-height: 500px;
        margin: 30px auto;
        padding: 20px;
    }

    #input-val {
        width: 80%;
        font-size: 16px;
        padding: 4px;
        border-radius: 4px;
        border: 1px solid #ccc;
        outline: none;
    }

    #submit {
        height: 30px;
        font-size: 14px;
        background: #fff;
        border-radius: 4px;
        border: 1px solid #ccc;
        outline: none;
        cursor: pointer;
        transition: .1s;
    }

    #submit:active {
        transform: scale(0.9);
    }

    ul {
        list-style: none;
    }

</style>
<body>
<div id=app>
    <div id="container">
        <div id="input">
            <input type="text" id="input-val" v-model="inputValue">
            <span>{{inputValue}}</span>
            <button id="submit" v-on:click="someFun()">submit</button>
            <ul id="todo">
                <li v-for="(item,index) in list">
                    {{ item.content }}
                </li>
            </ul>

        </div>
    </div>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                inputValue:"",
                list: [{state: 0, content: "todo list 1"}, {state: 2, content: "todo list 2"}]
            }
        },
        methods: {
            someFun() {
               this.list.push({ content:this.inputValue})
            }
        }
    });
</script>
</body>
</html>